<template>
    <div class="article-item van-hairline--bottom" @click="gotodetile">
         <p class="title van-multi-ellipsis--l2" :class="article.cover.images && article.cover.images.length===1 ? 'w66':''">{{article.title}}</p>
        <img class="img" :src="image" alt="" v-for="(image,index) in article.cover.images" :key="index">
        <div class="info">
            <span>{{article.aut_name}}</span>
            <span>{{article.comm_count}}评论</span>
            <span>{{article.pubdate | timeFilter}}</span>
            <zgticon name="esay-close" class="boke-icon"></zgticon>
        </div>
    </div>
</template>
<script>

export default {
  props: ['article'],
  methods: {
    gotodetile () {
      this.$router.push('/article?id=' + this.article.art_id)
    }
  }
}
</script>
<style lang="less" scoped>
.article-item {
  padding: 30px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .title {
    width: 100%;
    margin: 0;
    line-height: 44px;
    font-size: 32px;
    color: #333;
    margin-bottom: 16px;
    max-height: 88px;
    &.w66 {
      width: 66%;
    }
  }
  .img {
    width: 224px;
    height: 148px;
    border-radius: 8px;
    margin-bottom: 16px;
  }
  .info {
    width: 100%;
    color: #A5A6AB;
    font-size: 24px;
    position: relative;
    span {
      margin-right: 24px;
    }
    .boke-icon {
      float: right;
      font-size: 24px;
    }
  }
}
</style>
